<template>
  <div class="my">
    <!-- 用户详情 -->
    <div class="userInfo">
      <!-- 用户简介 -->
      <div class="intro">
        <!-- 用户信息 -->
        <div class="userIntro">
          <div class="name">{{ userInfo.nickname }}</div>
          <div class="describe">
            {{ userInfo.intro === null ? '写点东西吧' : userInfo.intro }}
          </div>
        </div>
        <!-- 用户头像 -->
        <img
          @click="$router.push('/info')"
          :src="userInfo.avatar === null ? imgUrl : baseUrl + userInfo.avatar"
          alt=""
          class="photo"
        />
      </div>
      <!-- 数据 -->
      <ul class="userData">
        <li class="item">
          <div class="sum">{{ userInfo.submitNum }}</div>
          <div class="word">累计答题</div>
        </li>
        <li class="item">
          <div class="sum">{{ userInfo.collectQuestions.length }}</div>
          <div class="word">收藏题目</div>
        </li>
        <li class="item">
          <div class="sum">{{ userInfo.errorQuestions.length }}</div>
          <div class="word">我的错题</div>
        </li>
        <li class="item">
          <div class="sum">
            {{
              userInfo.submitNum === 0
                ? 0
                : (
                    ((userInfo.submitNum - userInfo.errorNum) /
                      userInfo.submitNum) *
                    100
                  ).toFixed(0)
            }}<small>%</small>
          </div>
          <div class="word">正确率</div>
        </li>
      </ul>

      <!-- 岗位 -->
      <div class="job">
        <van-cell
          title="我的岗位"
          :value="userInfo.position"
          is-link
          class="jobInter"
          @click="$router.push('/editInfo?ed=position')"
        >
          <template #icon>
            <i class="iconfont iconicon_mine_gangwei myicon"></i>
          </template>
        </van-cell>
      </div>
    </div>
    <!-- 面经数据 -->
    <div class="share">
      <h2>面经数据</h2>
      <ul class="shareData">
        <li class="shareItem">
          <p>
            昨日阅读 <span>+{{ userInfo.shareData.read.yesterday }}</span>
          </p>
          <div class="sum">{{ userInfo.shareData.read.total }}</div>
          <div>阅读总数</div>
        </li>
        <li class="shareItem">
          <p>
            昨日获赞 <span>+{{ userInfo.shareData.star.yesterday }}</span>
          </p>
          <div class="sum">{{ userInfo.shareData.star.total }}</div>
          <div>获赞总数</div>
        </li>
        <li class="shareItem">
          <p>
            昨日新增 <span>+{{ userInfo.shareData.comment.yesterday }}</span>
          </p>
          <div class="sum">{{ userInfo.shareData.comment.total }}</div>
          <div>评论总数</div>
        </li>
      </ul>
    </div>
    <!-- 其它关于 -->
    <div class="about">
      <van-cell-group>
        <van-cell
          title="我的面经分享"
          is-link
          value="21"
          :border="false"
          size="52"
        >
          <template #icon>
            <i class="iconfont iconicon_mine_mianjing myicon"></i>
          </template>
        </van-cell>
        <van-cell title="我的消息" is-link value="98" :border="false">
          <template #icon>
            <i class="iconfont iconicon_mine_xiaoxi myicon"></i>
          </template>
        </van-cell>
        <van-cell title="收藏的题库" is-link value="32" :border="false">
          <template #icon>
            <i class="iconfont iconicon_mine_tikushoucang myicon"></i>
          </template>
        </van-cell>
        <van-cell title="收藏的企业" is-link value="32" :border="false">
          <template #icon>
            <i class="iconfont iconicon_mine_qiyeshoucang myicon"></i>
          </template>
        </van-cell>
        <van-cell title="我的错题" is-link value="123" :border="false">
          <template #icon>
            <i class="iconfont iconicon_mine_cuoti myicon"></i>
          </template>
        </van-cell>
        <van-cell title="收藏的面试经验" is-link value="166" :border="false">
          <template #icon>
            <i class="iconfont iconbtn_shoucang_sel myicon"></i>
          </template>
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  data () {
    return {
      baseUrl: process.env.VUE_APP_URL,
      imgUrl:
        'https://www.bloglab.cn/wp-content/uploads/thumb/2020/07/fill_w100_h100_g0_mark_1df5f427221dfc_1_avatar.jpeg'
    }
  }
}
</script>

<style lang="less" scoped>
.my {
  font-size: 12px;
  .userInfo {
    color: #fff;
    height: 215px;
    background: linear-gradient(45deg, #ce0031, #b8002c);
    .intro {
      padding: 31px 35px 0 15px;
      display: flex;
      justify-content: space-between;
      .userIntro {
        .name {
          font-size: 22px;
          font-weight: 700;
          letter-spacing: 0px;
          margin-bottom: 12px;
        }
        .describe {
          color: #eeb3c1;
        }
      }
      .photo {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .userData {
      display: flex;
      margin-top: 30px;
      .item {
        flex: 1;
        text-align: center;
        .sum {
          font-size: 22px;
          margin-bottom: 5px;
        }
        .word {
          color: #eeb3c1;
        }
      }
    }
    .job {
      margin-top: 30px;
      padding: 0 15px;
      .jobInter {
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 10px;
      }
    }
  }
  .share {
    height: 258/2px;
    margin: 40px 15px 20px;
    background: #fff;
    border-radius: 10px;
    padding-top: 19px;
    h2 {
      margin-left: 15px;
    }
    .shareData {
      margin-top: 18px;
      display: flex;
      .shareItem {
        flex: 1;
        text-align: center;
        div:nth-child(2) {
          margin: 10px 0;
        }
        p {
          font-size: 10px;
          color: #b4b4bdff;
          span {
            color: #00b8d4;
          }
        }
        .sum {
          font-size: 22px;
        }
      }
    }
  }
  .about {
    margin: 0 15px;
    border-radius: 10px;
    overflow: hidden;
    .van-cell {
      padding: 20px 15px;
    }
  }
  .myicon {
    font-size: 22px;
    margin-right: 10px;
  }
}
</style>
